<template>
  <div class="dashboard-container">
    <!-- <div class="page-top"> -->
    <el-row class="page-top" :gutter="20">
      <!--<el-col :span="12">
          <div class="box">
            <div class="box-hd">应用服务器</div>
            <div class="box-bd">
              <my-echart id="lineChart" :option="option"></my-echart>
            </div>
          </div>
        </el-col>-->
      <el-col :span="6">
        <div class="box" @click="gotap">
          <div class="box-hd">数据库连接池</div>
          <div class="box-bd">
            <div class="title">当前连接数</div>
            <div class="count gray-color">
              <span>{{ connectionCount }}</span>
            </div>
            <!--<div class="title">超时连接数</div>
              <div class="count">0</div>-->
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="box" @click="gotap1">
          <div class="box-hd">流程运行监控</div>
          <div class="box-bd">
            <div class="title">流程运行异常</div>
            <div class="count">{{ ProcessRunExceptionCount }}</div>
            <!-- <div class="title">前端异常捕获</div>
              <div class="count">{{foreEndExceptionCount}}</div>-->
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="box" @click="gotap2">
          <div class="box-hd">BPM规则运行监控</div>
          <div class="box-bd">
            <div class="title">规则运行异常</div>
            <div class="count">{{ ruleRunExceptionCount }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="box" @click="gotap3">
          <div class="box-hd">定时规则运行监控</div>
          <div class="box-bd">
            <!-- <div class="title">定时规则预期情况</div>
              <div class="count">34</div>-->
            <div class="title">未按期执行情况</div>
            <div class="count">{{ timingRuleExceptionCount }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- </div> -->
    <div class="page-bt">
      <div class="main-hd">告警提醒</div>
      <el-table
        v-loading="loading"
        :data="list"
        stripe
        max-height="500"
        fit
        highlight-current-row
      >
        <el-table-column label="序号" width="95" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          label="监控项目"
          prop="mLog.mObject.mProject.name"
          align="center"
        ></el-table-column>
        <el-table-column
          label="监控源"
          prop="mLog.mObject.name"
          align="center"
        ></el-table-column>
        <el-table-column
          label="时间"
          prop="mLog.time"
          align="center"
        ></el-table-column>
        <!--<el-table-column label="类型" align="center">
          <template slot-scope="scope">
            <span>{{ getTypeName(scope.row.type) }}</span>
          </template>
        </el-table-column>-->
        <el-table-column
          label="事件名称"
          prop="type"
          align="center"
        ></el-table-column>
        <el-table-column label="事件内容" align="center">
          <template slot-scope="scope">
            <el-link
              :underline="false"
              type="success"
              @click="showDetail(scope.row)"
              >查看</el-link
            >
          </template>
        </el-table-column>
        <el-table-column
          label="推送地址"
          prop="mLog.mObject.contact"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="ignore(scope.row)"
              >忽略</el-button
            >
            <el-button type="danger" size="mini" @click="handle(scope.row)"
              >处置</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 处置日志的Dialog弹框 -->

      <el-dialog title="处理日志" :visible.sync="dialogFormVisible">
        <el-form :model="logForm">
          <el-form-item label="处理人" :label-width="formLabelWidth">
            <el-input v-model="logForm.hcontact" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="logForm">
          <el-form-item label="处理时间" :label-width="formLabelWidth">
            <!--<el-input v-model="logForm.name" autocomplete="off"></el-input>-->
            <template>
              <div class="block">
                <el-date-picker
                  v-model="logForm.htime"
                  type="datetime"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
              </div>
            </template>
          </el-form-item>
        </el-form>
        <el-form :model="logForm">
          <el-form-item label="处理标题" :label-width="formLabelWidth">
            <el-input v-model="logForm.HTitle" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="logForm">
          <el-form-item label="处理内容" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              v-model="logForm.hcontent"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="logForm">
          <el-form-item label="处理结果" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              v-model="logForm.HResult"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handle2(logForm)">确 定</el-button>
        </div>
      </el-dialog>

      <div class="page-box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchField.page"
          :page-sizes="[10, 15, 20, 25, 30, 50]"
          :page-size="searchField.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 查看业务流程详细信息的dialog框 -->
      <el-dialog title="异常信息" :visible.sync="dialogVisiblebpm" width="50%">
        <el-table
          v-if="show"
          :data="arr"
          height="450"
          border
          style="width: 100%"
          :row-class-name="tableRowClassName"
        >
          <el-table-column prop="name" label="字段"> </el-table-column>
          <el-table-column prop="val" label="值"> </el-table-column>
        </el-table>
        <p v-else v-for="(item, index) in this.arr" :key="index">
          {{ item }}
        </p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisiblebpm = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisiblebpm = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<style>
.el-table .warning-row {
  background: rgb(233, 134, 134);
}
</style>
<script>
import { mapGetters } from "vuex";
import {
  getWarnList,
  findAllConsoleError,
  findTimingRuleExceptionCount,
  findConnectionCount,
  selectSelected,
  updateSelected,
  update,
} from "@/api/table";
// eslint-disable-next-line no-unused-vars
import MyEchart from "@/components/my-echart";

export default {
  name: "Dashboard",
  data() {
    return {
      show: true,
      list: null,
      arr: [],
      timeOUtConnectionCount: 0,
      loading: true,
      option: null,
      dialogVisiblebpm: false,
      handleFiled: {
        id: "",
        isignore: "",
      },
      typeOptions: [
        {
          id: "0",
          label: "宕机",
        },
        {
          id: "1",
          label: "连接超时",
        },
      ],
      total: 10,
      searchField: {
        page: 1,
        limit: 15,
      },
      timingRuleExceptionCount: 10,
      ruleRunExceptionCount: 10,
      ProcessRunExceptionCount: 10,
      foreEndExceptionCount: 10,
      connectionCount: 0,
      dialogFormVisible: false,
      logForm: {
        id: "",
        htime: "",
        hcontact: "",
        hcontent: "",
        isignore: "",
      },
      formLabelWidth: "120px",
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
    };
  },
  components: {
    MyEchart,
  },
  computed: {
    ...mapGetters(["name"]),
  },
  created() {
    this.setOption();
    this.initListData();
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (
        row.name == "wfAuthor" ||
        row.name == "wfAuthorCn" ||
        row.name == "wfCurrentnodeid" ||
        row.name == "wfCurrentnodename"
      ) {
        console.log("1");
        return "warning-row";
      } else {
        return "";
      }
    },
    //点击跳转监控
    gotap() {
      this.$router.push("/datasource_monitor/index");
    },
    gotap1() {
      this.$router.push("/logs");
    },
    gotap2() {
      this.$router.push("/console_error/index");
    },
    gotap3() {
      this.$router.push("/timing_rule/index");
    },
    // 填充图表数据
    setOption() {
      this.option = {
        legend: {
          data: ["系统登录次数"],
        },
        color: ["#6dd8d9"],
        xAxis: {
          type: "category",
          data: [
            "2020-09-28",
            "2020-09-29",
            "2020-09-30",
            "2020-10-01",
            "2020-10-02",
            "2020-10-03",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "系统登录次数",
            data: [20, 32, 9, 34, 12, 30],
            type: "line",
            smooth: true,
          },
        ],
      };
    },
    // 获取类型名称
    /*getTypeName(type) {
      const arr = this.typeOptions.filter(item => item.id === type)
      return arr && arr.length > 0 ? arr[0].label : '--'
    },*/
    // 查看
    showDetail(row) {
      this.arr = [];
      this.dialogVisiblebpm = true;
      if (row.mLog.content.slice(1, 2) == "审") {
        this.show = false;
        this.bpmdata = row.mLog.content;
        this.arr = this.bpmdata.split(",");
      } else {
        this.show = true;
        this.bpmdata = JSON.parse(row.mLog.content);
        console.log(this.bpmdata);
        let ary;
        for (let key in this.bpmdata) {
          ary = {};
          if (key != "xmldata") {
            ary.name = key;
            ary.val = this.bpmdata[key];
            this.arr.push(ary);
          }
        }
          this.arr.map((item,index)=>{
          if(item.name=='wfAuthor'){
            this.arr.unshift(this.arr.splice(index , 1)[0]);
          }
          if(item.name=='wfAuthorCn'){
            this.arr.unshift(this.arr.splice(index , 1)[0]);
          }
          if(item.name=='wfCurrentnodename'){
            this.arr.unshift(this.arr.splice(index , 1)[0]);
          }
          if(item.name=='wfCurrentnodeid'){
            this.arr.unshift(this.arr.splice(index , 1)[0]);
          }
        })
      }
    },
    // 忽略
    ignore(row) {
      console.log(row);
      this.handleFiled.id = row.mLogId;
      this.handleFiled.isignore = 1;
      console.log();
      this.open();
    },
    // 处置
    handle(row) {
      /*console.log(row)*/
      this.dialogFormVisible = true;
      this.logForm.id = row.mLogId;
      this.logForm.isignore = 2;
      /* console.log*/
    },
    initListData() {
      this.loading = true;
      getWarnList(this.searchField).then((res) => {
        console.log(res);
        this.list = res.data.rows;
        this.total = res.data.total;
        this.loading = false;
      });
      // 规则运行异常记录
      findAllConsoleError(this.searchField).then((res) => {
        this.ruleRunExceptionCount = res.data.total;
        this.loading = false;
      });
      // 获取流程运行异常记录
      findTimingRuleExceptionCount(this.searchField).then((res) => {
        console.log(res);
        this.timingRuleExceptionCount = res.data;
        this.loading = false;
      });
      // 获取数据库连接池连接数
      findConnectionCount().then((res) => {
        this.connectionCount = res.data;
        this.loading = false;
      });
      // // 获取流程运行异常记录
      selectSelected(this.searchField).then((res) => {
        this.ProcessRunExceptionCount = res.data.total;
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.searchField.limit = val;
      this.pagingQuery();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      console.log(`当前页: ` + val);
      this.searchField.page = val;
      this.pagingQuery();
    },
    // 消息提示框信息
    open(row) {
      this.$confirm("此操作将会忽略该条告警信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.updateLog(this.handleFiled);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消忽略",
          });
        });
    },
    // 更新日志
    updateLog(log) {
      console.log(log);
      updateSelected(log).then((res) => {
        console.log(res);
        if (res.flag == true) {
          this.$message.success("告警已忽略");
          this.initListData();
        } else {
          this.$message.error("告警忽略失败");
        }
      });
    },

    // 处理日志的确定请求
    handle2(logForm) {
      console.log(logForm);
      this.dialogFormVisible = false;
      // 向后台发送请求
      update(logForm).then((res) => {
        console.log(res);
        var flag = res.flag;
        if (flag) {
          this.$message.success("处置成功");
          this.logForm = {
            id: "",
            htime: "",
            hcontact: "",
            hcontent: "",
            isignore: "",
          };
          // 重新查询日志
          this.initListData();
        } else {
          this.$message.error("处置失败");
        }
      });
    },
    // 分页查询函数
    pagingQuery: function () {
      getWarnList(this.searchField).then((res) => {
        getWarnList(this.searchField).then((res) => {
          console.log(res);
          this.list = res.data.rows;
          this.total = res.data.total;
          this.loading = false;
        });
      });
    },

    // 获取定时规则异常次数
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    padding: 30px;
    height: 100%;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.page-top {
  margin-bottom: 15px;
}
.box {
  border: 1px solid #efefef;
  &-hd {
    height: 40px;
    line-height: 40px;
    background: #00a73c;
    color: #fff;
    text-align: center;
  }
  &-bd {
    height: 300px;
    padding: 15px;
    overflow: hidden;
    .title {
      height: 40px;
      line-height: 40px;
    }
    .count {
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      color: #ea0606;
    }
    .gray-color {
      color: #333;
      span {
        color: #00a73c;
      }
    }
  }
}
.page-bt {
  .main-hd {
    height: 40px;
    line-height: 40px;
    background: #00a73c;
    color: #fff;
    padding-left: 10px;
  }
  .page-box {
    padding: 10px;
    text-align: center;
  }
}
.box-bd {
  height: 100px !important;
}
</style>
